<template>
  <div class="gooleVerify">
    <div class="header">
      <div @click="$router.go(-1)">
        <img
          src="../../assets/image/assets-center/left-arrow.png"
          alt=""
          class="w-14 h-27"
        />
      </div>
      <div class="textColor" @click="$router.push('/finish')">
        {{ $t("跳过") }}
      </div>
    </div>
    <Step :step="3"></Step>
    <div class="title textColor">{{ $t("安全绑定") }}</div>
    <div
      class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40"
    >
      <div class="imgbox">
        <canvas
          id="QRcodeCanvas"
          v-show="!imgshow"
          style="width: 100%; height: 100%"
        ></canvas>
        <img :src="googleQrImg" alt="" v-show="imgshow" class="QRcodeImg" />
      </div>
      <div class="code flex items-center justify-center textColor">
        {{ google_auth_secret }}
        <img src="@/assets/image/reload.png" @click="getGoogleauth" alt="" />
      </div>
      <p class="tips">{{ $t("(请妥善备份密钥以防丢失)") }}</p>
      <div class="copy textColor" @click="copy">{{ $t("复制") }}</div>
    </div>
    <div class="flex justify-between mt-48 mb-20">
      <div class="textColor">{{ $t("谷歌验证码") }}</div>
      <div class="flex items-center">
        <div class="colorMain" @click="value = ''">{{ $t("清除") }}</div>
        <div class="colorMain ml-30" @click="pastCont">{{ $t("粘贴") }}</div>
      </div>
    </div>
    <van-password-input
      :value="value"
      :gutter="16"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      :mask="false"
    />
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
    <div class="mt-20"></div>
    <div class="mt-44 bottom tabBackground textColor">
      <p>{{ $t("注意事项") }}</p>
      <p>{{ $t("1.下载Google身份验证器APP") }}</p>
      <p>{{ $t("2.扫描上图二维码输入验证码完成绑定") }}</p>
    </div>
    <div class="btn btnMain" @click="submit">{{ $t("确定") }}</div>
  </div>
</template>

<script>
import Step from "./step.vue";
import { PasswordInput, NumberKeyboard } from "vant";
import Axios from "@/API/userCenter.js";
import { HOST_URL } from "@/config";
import QRCode from "qrcode";
import { mapGetters } from "vuex";

export default {
  props: {},
  components: {
    Step,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  data() {
    return {
      HOST_URL,
      google_auth_secret: "",
      imgshow: false,
      google_auth_url: "",
      value: "",
      showKeyboard: false,
      googleQrImg: "",
    };
  },
  mounted() {
    this.getGoogleauth();
  },
  computed: {
    ...mapGetters("user", ["userInfo"]),
  },
  methods: {
    getQRCode() {
      let qrData = `otpauth://totp/${this.userInfo.username}?secret=${this.google_auth_secret}`;

      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 4, //二维码留白边距
        width: 200, //宽
        height: 200, //高
        text: qrData, //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      this.QRCodeMsg = qrData; //生成的二维码为URL地址js
      let msg = document.getElementById("QRcodeCanvas"); // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
        console.log(error);
      }); // 将canvas转成图片格式，可以长按保存
      this.googleQrImg = msg.toDataURL("image/png");
      this.imgshow = true;
    },
    //图片地址读取当前域名
    replaceUrl(val) {
      const oldUrl = val.replace(/^https:\/\/[^/]+/, "");
      const nowUrl = this.HOST_URL;
      return nowUrl + oldUrl;
    },
    copy() {
      this.$copyText(this.google_auth_secret)
        .then((message) => {
          this.$toast(this.$t("复制成功"));
        })
        .catch((err) => {});
    },
    getGoogleauth() {
      Axios.getGoogleauth({})
        .then((res) => {
          this.google_auth_secret = res.data.google_auth_secret;
          this.google_auth_url = res.data.google_auth_url;
          this.getQRCode();
          // console.log(res)
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    bindGoogleauth() {
      Axios.bindGoogleauth({
        secret: this.google_auth_secret,
        code: this.value,
      })
        .then((res) => {
          let google_auth_bind = res.data.google_auth_bind;
          if (google_auth_bind) {
            this.$store.commit("user/SET_USERINFO", { googleverif: true });
            this.$toast(this.$t("绑定成功"));
            this.$router.push("/finish");
          } else {
            this.$toast(this.$t("绑定失败"));
          }
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    submit() {
      if (this.value.length < 6) {
        this.$toast(this.$t("请输入验证码"));
        return false;
      }
      this.bindGoogleauth();
    },
    async pastCont() {
      this.value = await navigator.clipboard.readText();
    },
  },
  watch: {
    value(value) {
      if (value.length === 6) {
        this.showKeyboard = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.gooleVerify {
  padding: 32px;
  padding-bottom: 108px;
  font-size: 26px;
  width: 100%;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 0 26px;
  font-size: 28px;
  height: 100px;
  line-height: 100px;
}

.stepBox {
  padding: 0 30px;
}

.title {
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 52px;
}

.imgbox {
  @include themify() {
    border: 1px solid themed("line_color");
  }

  padding: 30px;
  width: 364px;
  height: 364px;
  box-sizing: border-box;

  img {
    width: 100%;
    height: 100%;
  }
}

.code {
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
  margin-top: 44px;
  height: 36px;

  img {
    width: 26px;
    height: 26px;
    margin-left: 10px;
  }
}

.tips {
  margin-top: 20px;
  color: #999999;
}

.copy {
  border-radius: 8px;
  width: 264px;
  height: 80px;
  margin-top: 32px;

  @include themify() {
    border: 2px solid themed("line_color");
  }

  line-height: 80px;
}

.bottom {
  padding: 40px 32px 14px 32px;

  p {
    padding-bottom: 26px;
  }
}

.btn {
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  border-radius: 10px;
}

.van-password-input {
  margin: 0;
}

.van-password-input__security li {
  @include themify() {
    background: themed("tab_background");
  }

  width: 100px;
  height: 100px;

  @include themify() {
    color: themed("text_color");
  }
}
</style>
